<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        body,html{
            height: 100%;
        }

        span {
            width: 40px;
            height: 40px;
            background-color: red;
            color: white;
            border-radius: 50%;
            display: block;
            text-align: center;
            line-height: 40px;
            font-size: 24px;
            font-weight: bold;
            position: absolute;
            top: 0;
            left: 0
        }
    </style>
</head>
<body>
    <p>得分：<b>0</b></p>
</body>
</html>
<script src="common.js"></script>
<script>
    /*
        实现思路
        a)没有行为操作的情况下 有一个字符向下掉落，一旦达到底部 销毁
            1、创建一个字符 
                字符串内容要随机  将可以使用的字符放到一个字符串中。使用随机数计算一个下标
                字符需要设置到页面上span标签中 创建一个span标签 在内容进行设置后最后加入到body标签中
            2、控制字符向下掉落 向下掉落就是控制span标签的top值
                1、使用定时器反复修改标签的top值
                2、当掉落到底部时span标签需要销毁 并且销毁定时器 一旦销毁了 在将a步骤在来一次
        b)如果输入的内容与字符相同，重新再来一个字符
            绑定键盘的按下事件，事件触发时 可以使用事件对象 判断与字符是否相同 一旦相同销毁字符串 再讲a步骤在来一次
    */
    // 获取文档的宽度
    var maxWidth = document.body.clientWidth || document.documentElement.clientWidth;
    // 获取文档的高度
    var maxHeigh = document.body.clientHeight || document.documentElement.clientHeight;
    // 保存定时器标识 
    var timer;
    // 保存随机的字符
    var char;
    // 保存span标签的dom对象
    var spanDom;
    // 创建随时数的函数
    function makeRandom(start,end){
        return Math.floor(Math.random()*(end-start+1)+start);
    }
    // 创建随机字符
    function createChar(){
        // 可以使用的字符串
        var string = 'qwertyuioplkjhgfdsa';
        // 随机获取一个下标 
        var index = makeRandom(0,string.length-1);
        // 返回指定下标的字符
        return string[index];
    }
    // 创建span标签 并且实现向下掉落     
    function createSpan(){
        // 创建字符
        char = createChar();
        // 创建span标签
        spanDom = document.createElement('span');
        // 设置span标签的内容
        spanDom.innerHTML = char;
        // 控制span标签的left值  最大值需要减掉自身宽度
        var left = makeRandom(0,maxWidth-40);
        spanDom.style.left = left +'px';
        // 将span标签加入到页面上
        document.body.appendChild(spanDom);
        // 使用定时器修改span标签的top值控制向下掉落
        timer = setInterval(function(){
            // 获取到现在的top值
            var top = parseInt(getStyle(spanDom,'top'));
            // 先判断是否已经掉落到底部
            if(top >= maxHeigh-40){
                // 清除定时器  
                clearInterval(timer);
                // 销毁span标签
                document.body.removeChild(spanDom);
                // 重新再来一次
                createSpan();
            }else{
                spanDom.style.top = top + 5 +'px';
            }
        },200)
    }
    createSpan();
    document.onkeydown = function(e){
        console.log(123)
        var event = e || window.event;
        // 判断 现在输入的字符 与生成的字符是否相等
        // 按键码就是ASCII码值。所以按键码的值如果与字符的ASCII相等证明 字符相同
        if(event.key.toLowerCase() == char){
            // 清除定时器  
            clearInterval(timer);
            // 销毁span标签
            document.body.removeChild(spanDom);
            // 重新再来一次
            createSpan();
            // 计算得分
            document.querySelector('b').innerHTML = parseInt(document.querySelector('b').innerHTML) + 1;
        }
    }
    
</script>